// 移动端订单管理系统 - CSS变量定义

// 颜色系统
:root {
  // 主色调
  --primary-color: #007AFF;
  --primary-light: #5AC8FA;
  --primary-dark: #0051D5;
  
  // 功能色
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #ff4d4f;
  --info-color: #1890ff;
  
  // 中性色
  --text-color: #333333;
  --text-color-secondary: #666666;
  --text-color-placeholder: #999999;
  --text-color-disabled: #cccccc;
  
  // 背景色
  --background-color: #f5f5f5;
  --background-color-light: #fafafa;
  --card-background: #ffffff;
  
  // 边框色
  --border-color: #e8e8e8;
  --border-color-light: #f0f0f0;
  --divider-color: #eeeeee;
  
  // 阴影
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 4px 16px rgba(0, 0, 0, 0.15);
  
  // 圆角
  --border-radius-small: 4px;
  --border-radius: 8px;
  --border-radius-large: 12px;
  --border-radius-round: 50%;
  
  // 间距
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  
  // 字体大小
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 20px;
  --font-size-title: 24px;
  
  // 行高
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  
  // 动画时长
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  
  // Z-index层级
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  
  // 移动端特定
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-right: env(safe-area-inset-right);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-area-inset-left: env(safe-area-inset-left);
  
  // 触摸目标最小尺寸
  --touch-target-min: 44px;
  
  // 页面内边距
  --page-padding: 15px;
  --page-padding-sm: 10px;
}

// 深色模式支持
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ffffff;
    --text-color-secondary: #cccccc;
    --text-color-placeholder: #999999;
    --text-color-disabled: #666666;
    
    --background-color: #1a1a1a;
    --background-color-light: #2a2a2a;
    --card-background: #2d2d2d;
    
    --border-color: #404040;
    --border-color-light: #333333;
    --divider-color: #404040;
  }
}

// 响应式断点
$breakpoints: (
  xs: 320px,
  sm: 375px,
  md: 414px,
  lg: 768px,
  xl: 1024px
);

// 响应式混入
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  }
}

// 触摸反馈混入
@mixin touch-feedback {
  transition: all var(--transition-fast) ease;
  
  &:active {
    transform: scale(0.98);
    opacity: 0.8;
  }
}

// 卡片样式混入
@mixin card-style {
  background-color: var(--card-background);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-light);
  border: 1px solid var(--border-color-light);
}

// 按钮样式混入
@mixin button-base {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius);
  font-size: var(--font-size-md);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal) ease;
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  @include touch-feedback;
}

@mixin button-primary {
  @include button-base;
  background-color: var(--primary-color);
  color: #ffffff;
  
  &:hover:not(:disabled) {
    background-color: var(--primary-dark);
  }
}

@mixin button-secondary {
  @include button-base;
  background-color: transparent;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  
  &:hover:not(:disabled) {
    background-color: var(--primary-color);
    color: #ffffff;
  }
}

// 输入框样式混入
@mixin input-base {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-md);
  color: var(--text-color);
  background-color: var(--card-background);
  transition: border-color var(--transition-normal) ease;
  
  &:focus {
    border-color: var(--primary-color);
    outline: none;
  }
  
  &::placeholder {
    color: var(--text-color-placeholder);
  }
  
  &:disabled {
    background-color: var(--background-color-light);
    color: var(--text-color-disabled);
    cursor: not-allowed;
  }
}

// 列表项样式混入
@mixin list-item {
  display: flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--spacing-md) var(--page-padding);
  background-color: var(--card-background);
  border-bottom: 1px solid var(--border-color-light);
  transition: background-color var(--transition-fast) ease;
  
  &:active {
    background-color: var(--background-color-light);
  }
  
  &:last-child {
    border-bottom: none;
  }
}

// 安全区域适配混入
@mixin safe-area-padding($position: 'all') {
  @if $position == 'all' {
    padding-top: var(--safe-area-inset-top);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
  } @else if $position == 'top' {
    padding-top: var(--safe-area-inset-top);
  } @else if $position == 'bottom' {
    padding-bottom: var(--safe-area-inset-bottom);
  } @else if $position == 'left' {
    padding-left: var(--safe-area-inset-left);
  } @else if $position == 'right' {
    padding-right: var(--safe-area-inset-right);
  }
}

// 文本省略混入
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 加载状态混入
@mixin loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

// 弹跳动画
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

// 淡入动画
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 滑入动画
@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

// 通用动画类
.animate-bounce {
  animation: bounce 1s infinite;
}

.animate-fade-in {
  animation: fadeIn var(--transition-normal) ease-out;
}

.animate-slide-in-up {
  animation: slideInUp var(--transition-normal) ease-out;
}

// 通用工具类
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.flex-1 { flex: 1; }

.w-full { width: 100%; }
.h-full { height: 100%; }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

.rounded { border-radius: var(--border-radius); }
.rounded-lg { border-radius: var(--border-radius-large); }
.rounded-full { border-radius: var(--border-radius-round); }

.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-heavy); }

.text-primary { color: var(--primary-color); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-error { color: var(--error-color); }
.text-secondary { color: var(--text-color-secondary); }
.text-placeholder { color: var(--text-color-placeholder); }

.bg-primary { background-color: var(--primary-color); }
.bg-success { background-color: var(--success-color); }
.bg-warning { background-color: var(--warning-color); }
.bg-error { background-color: var(--error-color); }
.bg-card { background-color: var(--card-background); }